<template>
  <div class="container">
    <div class="sidebar">
      <h2>Sidebar</h2>
      <ul>
        <li>
          <router-link to="/main/home">Home</router-link>
        </li>
        <li>
          <router-link to="/about">About</router-link>
        </li>
        <li>
          <router-link to="/main/contact">Contact</router-link>
        </li>
      </ul>
      <router-view name="LeftSidebar" class="view left-sidebar"></router-view>
    </div>
    <div class="main">
      <router-view class="view main-content"></router-view>
    </div>
    <div class="extra">
      <h2>Extra Content</h2>
      <p>这是右侧内容</p>
      <router-view name="RightSidebar" class="view right-sidebar"></router-view>
    </div>
  </div>
</template>

<style scoped>
.container {
  display: flex;
  justify-content: space-between;
}

.sidebar {
  flex: 1;
  background-color: #f1f1f1;
  padding: 20px;
}

.main {
  flex: 2;
  padding: 20px;
}

.extra {
  flex: 1;
  background-color: #ff0000;
  padding: 20px;
}
</style>
